/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-04-06 17:36:12
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 16:32:23
 */
import React,{ useEffect } from 'react';

import { Modal,Form, Input,Radio } from 'antd';

import FooterButton from '../footer/FooterButton';

const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

const Provider = (props) => {
    const onFinish = (values) => {
        console.log(values);
      };
      // eslint-disable-next-line react-hooks/exhaustive-deps
      let content = {...props.content}
      const [form] = Form.useForm()

      useEffect(() => {
        form.setFieldsValue({
            condition:content.condition,
            name:content.provider,
            contact:content.contact,
            telephone:content.telephone,
            phone:content.phone,
            qq:content.QQ,
            city:content.city,
            address:content.address,
            remark:content.remark,
            
        })
    }, [form,content]);

    return (
        <div>
            <Modal 
            // okText='保存' 
            // cancelText='关闭' 
            forceRender={true} 
            maskClosable={false} 
            mask={false} 
            title={props.title} 
            visible={props.visible} 
            footer={[
              <FooterButton 
              key='btnBox'
              btn1='保存' 
              btn2='关闭' 
              clickBtn1={props.onOk}
              clickBtn2={props.onCancel}
               />
               ]}
            // onOk={props.onOk} 
            onCancel={props.onCancel} 
            centered 
            bodyStyle={{overflowY:"scroll",height:"500px",paddingTop:"0"}} 
            getContainer={false}
            >
            {/* 标题 */}
            <div style={{fontSize:"16px",height:"40px",lineHeight:"40px",fontWeight:"600"}}>{props.title}</div>
            {/* 表单域 */}
            <Form 
            form={form} 
            size='small' 
            {...layout} 
            name="nest-messages" 
            onFinish={onFinish} 
            validateMessages={false}
            >

                  {/* 合作情况 */}
                  <Form.Item
                    name= 'condition'
                    label="合作情况"
                   
                  >
                    <Radio.Group>
                      <Radio value="已合作">已合作</Radio>
                      <Radio value="未合作">未合作</Radio>
                    </Radio.Group>
                  </Form.Item>
                  {/* 供应商名称 */}
                  <Form.Item
                    name= 'name'
                    label="供应商名称"
                    rules={[{
                        require:true,
                        message: '供应商名称不能为空!',
                    }]}
                  >
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 联系人 */}
                  <Form.Item
                    name= 'contact'
                    label="联系人"
                   
                  >
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 电话 */}
                  <Form.Item name= 'telephone' label="电话">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 传真 */}
                  <Form.Item name= 'fax' label="传真">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 手机号 */}
                  <Form.Item name= 'phone' label="手机号">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 微信号 */}
                  <Form.Item name= 'weiChat' label="微信号">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* QQ */}
                  <Form.Item name= 'qq' label="QQ">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 邮箱 */}
                  <Form.Item name= 'email' label="邮箱">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 网址 */}
                  <Form.Item name= 'website' label="网址">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 省份/城市 */}
                  <Form.Item label="省份/城市">
                  <Form.Item name= 'province' noStyle>
                    <Input style={{width:"100px"}} />
                  </Form.Item>
                  <span>省</span>
                  <Form.Item name="city" noStyle>
                  <Input style={{width:"100px"}} />
                  </Form.Item>
                  <span>市</span>
                  </Form.Item>
                  {/* 地址 */}
                  <Form.Item name= 'address' label="地址">
                    <Input style={{width:'220px'}} />
                  </Form.Item>
                  {/* 备注 */}
                  <Form.Item name= 'remark' label="备注">
                    <Input.TextArea />
                  </Form.Item>
            </Form>
            </Modal>
        </div>
    );
}

export default Provider;
